<template>
  <div class="table-wrapper">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="account" label="账号">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.account" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.account}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号码">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.phone" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱">
        <template slot-scope="scope">
          <input type="text" v-model="scope.row.email" v-show="scope.row.iseditor" />
          <span v-show="!scope.row.iseditor">{{scope.row.email}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width=260px>
        <template slot-scope="scope">
          <el-button @click="edit(scope.row, scope)">编辑</el-button>
          <el-button type="warning" @click="save(scope.row)">保存</el-button>
          <el-button type="danger" @click="save(scope.row, scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "User-admin",
  data() {
    return {
      tableData: [{
        account: '2016-05-02',
        phone: '王小虎',
        email: '上海市普陀区金沙江路 1518 弄',
        iseditor: false
      }, {
        account: '2016-05-04',
        phone: '王小虎',
        email: '上海市普陀区金沙江路 1517 弄',
        iseditor: false
      }],
      search: ''
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    edit(row, index) {
      row.iseditor = true;
    },
    save(row, index) {
      row.iseditor = false;
    },
    delete(row,index){
      row.iseditor=true;
    }
  },

}
</script>

<style scoped>
.table-wrapper{
  margin: 10% auto;
}
.table-wrapper /deep/  .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
.table-wrapper /deep/ tr, .table-wrapper /deep/ th, .table-wrapper /deep/ td {
  background: #1439391c !important;
  color:#fff;
  border-bottom: 0px;
}
.table-wrapper /deep/  .el-table tbody tr:hover>td {
  background-color: #367f7f78 !important
}
.table-wrapper /deep/ .el-table__row {
  background: #1439391c !important;
  color: #46d4ff;
}
</style>
